<script setup lang="ts">
import { onMounted } from 'vue';

import autofit from 'autofit.js';

import Chart1 from './components/chart1.vue';
import Chart2 from './components/chart2.vue';
import Chart3 from './components/chart3.vue';
import Chart4 from './components/chart4.vue';
import Header from './components/header.vue';

defineOptions({
  name: 'Screen',
});

onMounted(() => {
  autofit.init({
    el: '#large-screen',
  });
});
</script>
<template>
  <div id="large-screen" class="relative">
    <Header />
    <div class="flex justify-between">
      <Chart1 class="h-[400px] w-[32%]" />
      <Chart2 class="h-[400px] w-[32%]" />
      <Chart3 class="h-[400px] w-[32%]" />
    </div>
    <Chart4 class="absolute bottom-5 right-4 h-[400px] w-[600px]" />
  </div>
</template>
<style>
#large-screen {
  color: white;
  background-image: url('../../assets/bg.jfif');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
</style>
